{% block sw_settings_search_searchable_content %}
<mt-card
    class="sw-settings-search-searchable-content"
    position-identifier="sw-settings-search-searchable-content"
    :title="$tc('sw-settings-search.generalTab.labelSearchableContent')"
>
    {% block sw_settings_search_searchable_content_title %}
    <span class="sw-field sw-settings-search__searchable-content-title">
        {{ $tc('sw-settings-search.generalTab.textDescriptionSearchableContent') }}
    </span>
    {% endblock %}

    {% block sw_settings_search_searchable_actions %}
    <sw-container
        class="sw-field"
        columns="repeat(auto-fit, minmax(100px, 1fr))"
        align="center"
        gap="0px 30px"
    >
        <div class="sw-settings-search__searchable-content-button-group">
            {% block sw_settings_search_searchable_add_item %}
            <mt-button
                v-if="defaultTab !== tabNames.generalTab"
                class="sw-settings-search__searchable-content-add-button"
                ghost
                size="small"
                :disabled="!acl.can('product_search_config.creator')"
                variant="secondary"
                @click="onAddNewConfig"
            >
                {{ $tc('sw-settings-search.generalTab.buttonAddContent') }}
            </mt-button>
            {% endblock %}

            {% block sw_settings_search_searchable_reset_default %}
            <mt-button
                v-if="defaultTab !== tabNames.customTab"
                class="sw-settings-search__searchable-content-reset-button"
                size="small"
                :disabled="isEnabledReset || !acl.can('product_search_config.editor')"
                variant="secondary"
                @click="onResetToDefault"
            >
                {{ $tc('sw-settings-search.generalTab.buttonResetDefault') }}
            </mt-button>
            {% endblock %}
        </div>

        {% block sw_settings_search_searchable_show_example %}
        {% block sw_settings_search_searchable_show_example_link %}
        <div class="sw-settings-search__searchable-content-link-text">

            {% block sw_settings_search_searchable_show_example_link_element %}
            <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
            <a
                class="sw-settings-search__searchable-content-show-example-link"
                role="button"
                tabindex="0"
                @click="onShowExampleModal"
            >
                {{ $tc('sw-settings-search.generalTab.linkExample') }}
                <mt-icon
                    name="regular-long-arrow-right"
                    size="16px"
                />
            </a>
            {% endblock %}

            <router-link
                :to="{ name: 'sw.settings.search.index.liveSearch' }"
                class="sw-settings-search__searchable-content-rebuild-link"
            >
                {{ $tc('sw-settings-search.liveSearchTab.linkRebuildSearchIndex') }}
                <mt-icon
                    name="regular-long-arrow-right"
                    size="16px"
                />
            </router-link>
        </div>
        {% endblock %}

        {% block sw_settings_search_searchable_show_example_modal %}
        <sw-settings-search-example-modal
            v-if="showExampleModal"
            @modal-close="onCloseExampleModal"
        />
        {% endblock %}
        {% endblock %}
    </sw-container>
    {% endblock %}

    {% block sw_settings_search_searchable_content_tabs %}
    <sw-tabs
        :default-item="defaultTab"
        position-identifier="sw-settings-search-searchable-content"
    >
        <template #default="{ active }">
            {% block sw_settings_search_searchable_content_general_tab_title %}
            <sw-tabs-item
                v-bind="$props"
                class="sw-settings-search__searchable-content-tab-title"
                :name="tabNames.generalTab"
                :active-tab="active"
                @click="onChangeTab(tabNames.generalTab)"
            >
                {{ $tc('sw-settings-search.generalTab.labelGeneralTab') }}
            </sw-tabs-item>
            {% endblock %}

            <sw-tabs-item
                v-bind="$props"
                class="sw-settings-search__searchable-content-tab-title"
                :name="tabNames.customTab"
                :active-tab="active"
                @click="onChangeTab(tabNames.customTab)"
            >
                {{ $tc('sw-settings-search.generalTab.labelCustomFieldsTab') }}
            </sw-tabs-item>
        </template>

        <template #content="{ active }">
            {% block sw_settings_search_searchable_content_general_tab_item %}
            <sw-settings-search-searchable-content-general
                v-if="active === tabNames.generalTab"
                :is-empty="isListEmpty"
                :is-loading="isLoading"
                :columns="getProductSearchFieldColumns"
                :repository="productSearchFieldRepository"
                :search-configs="searchConfigFields"
                :field-configs="fieldConfigs"
                @data-load="loadData"
                @config-save="saveConfig"
            />
            {% endblock %}

            <sw-settings-search-searchable-content-customfields
                v-if="active === tabNames.customTab"
                :is-empty="isListEmpty"
                :is-loading="isLoading"
                :columns="getProductSearchFieldColumns"
                :repository="productSearchFieldRepository"
                :search-configs="searchConfigFields"
                @data-load="loadData"
                @config-add="onAddNewConfig"
                @config-save="saveConfig"
                @config-delete="deleteConfig"
            />
        </template>
    </sw-tabs>
    {% endblock %}
</mt-card>
{% endblock %}
